<script setup>
import {onMounted, ref} from "vue";
import { http } from "@/api";
import { ElMessage } from "element-plus";
const formRef1 = ref(null)
const formData1 = ref({
  // 场级告警
  field_level_alarm: '0',
  // 场级AGC允许
  field_agc_allow: '0',
  // 控制方式（调度/手动）
  control_mode: '0',
  // 实时电价 (元)
  real_time_price: '',
  // 实时电网指令 (MW)
  real_time_grid_command: '',
  // 电网指令与光储调度值差限 (MW)
  grid_command_difference_limit: '',
  // 实时光伏出力功率 (MW)
  real_time_photovoltaic_power: '',
  // 实时储能出力功率 (MW)
  real_time_storage_power: '',
  // 实时光储调度指令 (MW)
  real_time_photovoltaic_storage_command: '',
})
const rules1 = ref({
})
const itemList = ref([])
const submit1 = () => {
  formRef1.value.validate((valid) => {
    if (valid) {
      http.pvCoordination.update(formData1.value).then(res => {
        ElMessage.success(res.msg)
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

onMounted(() => {
  http.pvCoordination.list().then(res => {
    itemList.value = res.data.filter(el => !['field_level_alarm'].includes(el.code))
    const obj = {}
    res.data.forEach(item => {
      obj[item.code] = item.value
    })
    for (const formData1Key in formData1.value) {
      if (formData1.value.hasOwnProperty(formData1Key)) {
        formData1.value[formData1Key] = obj[formData1Key]
      }
    }
    console.log(formData1.value)
  })
})

import RelTimeLine from "./real-time-line.vue";
import DayLine from "./day-line.vue";
</script>

<template>
  <div class="data-container">
    <el-card shadow="never" style="margin-bottom: 20px">
      <template #header>
        <div class="card-header">
          <span>基础数据</span>
        </div>
      </template>
      <el-form :model="formData1" :rules="rules1" ref="formRef1" label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="场级告警">
              <el-switch
                v-model="formData1.field_level_alarm"
                active-value="1"
                inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-form-item label="场级AGC允许">
              <el-switch
                  v-model="formData1.field_agc_allow"
                  active-value="1"
                  inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="控制方式（调度/手动）">
              <el-select v-model="formData1.control_mode">
                <el-option label="调度" value="0"></el-option>
                <el-option label="手动" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-for="item in itemList">
            <el-form-item :label="item.description + '（' + item.unit +'）'" :prop="item.code" :rules="rules1[item.code]">
              <el-input v-model="formData1[item.code]"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item >
          <div style="text-align: center;width: 100%">
            <el-button type="primary" @click="submit1">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <RelTimeLine />
    <DayLine />
  </div>
</template>

<style scoped lang="scss">

</style>